<template>
  <div class="reportDeatil">
    <div class="content-wrap">
      <div class="none-data" v-if="dataList.length == 0">
        <el-empty description="暂无数据"></el-empty>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <div class="fooler-Wrap">
        <div class="user-wrap">
          <p class="text-left">{{ atricle.userName }}</p>
          <div class="head-img-wrap">
            <img
              src="https://mypp-fd.zol-img.com.cn/t_s100x100/g6/M00/0A/0D/ChMkKmGTiYuIAdDZAAALmcZAGz4AAVr8AP_PyUAAAux011.jpg"
              title="头像"
            />
          </div>
        </div>
        <div class="content-info">
          <p class="report-time">
            发表于 <span>{{ atricle.createTime }}</span>
          </p>
          <div class="content-text" v-html="atricle.body"></div>
          <!-- <div class="content-opration">
            <p style="text-align: right; padding-right: 24px">
              <el-button type="primary" plain round size="small"
                >回复</el-button
              >
            </p>
          </div> -->
          <div class="replay" v-for="(item,index) in replay" :key="index">
            <p class="report-time-top">
              回复于 <span>{{ item.createTime }}</span>
            </p>
            <div class="replay-msg" v-html="item.info">
            </div>
          </div>
        </div>
      </div>
    <div class="report">
      <el-card class="box-card">
        <template #header>
          <div class="card-header-report">回复帖子</div>
        </template>
        <div class="tinymc">
          <tinymce
            id="myedit"
            ref="editor"
            @setTinymce="setTinymce"
            :disabled="disabled"
            :value="'请输入内容'"
            @onClick="onClick"
          />
          <div class="btnGrou">
            <el-button type="primary" plain @click="submitArticle"
              >发布</el-button
            >
            <el-button type="warning" plain @click="clear">清空内容</el-button>
          </div>
          <!-- <button @click="clear">清空内容</button> -->
          <!-- <button @click="disabled = true">禁用</button> -->
        </div>
      </el-card>
    </div>
    </div>
  </div>
</template>
<style scoped>
.fooler-Wrap,
.content-wrap {
  margin-top: 12px;
  min-height: 300px;
  color: #333;
  font-size: 14px;
}
.none-data {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.fooler-Wrap {
  display: flex;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}
.user-wrap {
  width: 152px;
  background: rgb(236, 245, 255);
  padding: 12px;
}
.head-img-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: #fff;
  padding: 12px;
  border: 1px solid #cfcfaf;
}
.head-img-wrap > img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-info {
  padding: 12px 0;
  width: 100%;
}
.text-left {
  text-align: left;
  padding-left: 14px;
}

.report-time {
  margin: 0 15px 0 0;
  color: #aaa;
  padding: 0px 0px 12px 12px;
  border-bottom: 1px solid #f2f6f7;
  text-align: left;
}
.content-text {
  min-height: 175px;
  padding: 12px;
  text-align: left;
}
.content-opration {
  border-top: 1px solid #f2f6f7;
  height: 44px;
}
.report-time-top {
  margin: 0 15px 0 0;
  color: #aaa;
  padding: 0px 0px 12px 12px;
  text-align: left;
  border-top: 1px solid #f2f6f7;
  padding-top: 12px;
}
.replay-msg{
  text-align: left;
  min-height: 42px;
  color: #333;
  padding: 0 15px;
}
.report {
  margin-top: 12px;
}
.report :deep(.el-card__header) {
  padding: 12px 18px !important;
  background: #409eff;
  text-align: left;
}
.card-header-report {
  color: #fff;
}
.tinymc {
  margin-top: 20px;
}
.tag-choose {
  text-align: left;
}
.btnGrou {
  text-align: right;
  margin-top: 20px;
}
.pager-item {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.articles-item {
  text-align: left;
  height: 52px;
  color: #333;
  padding: 0 38px;
  display: flex;
  border-bottom: 1px solid rgb(236, 245, 255);
  cursor: pointer;
  align-items: center;
}
.articles-content {
  width: 80%;
}
.articles-info {
  min-width: 180px;
  color: #aaa;
  font-size: 12px;
}
</style>
<script>
import tinymce from "../components/tinymce.vue";
export default {
  name: "reportDeatil",
  components: {
    tinymce,
  },
  props: {},
  data() {
    return {
      dataList: [
        {
          name: "test",
        },
      ],
      msg: "请填写信息",
      disabled: false,
      id: 0,
      userInfo: {
        name: "",
      },
      atricle: {
        body: "",
        title: "",
        type: "",
      },
      replay: [],
      chooseValue:""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.userInfo = this.$store.state.userInfo;
    console.log(this.userInfo, "dsdasa");
    if (!this.id) {
      return;
    }
    this.getArticlesById();
    this.getReplyMessage();
  },
  methods: {
    getArticlesById() {
      this.$api.user.getArticlesById({ articleId: this.id }).then((res) => {
        if (res.status == 0) {
          this.atricle = Object.assign({}, res.data);
        } else {
          this.$tip.error(res.msg);
        }
      });
    },
    getReplyMessage() {
      this.$api.user.getReplyMessage({ articleId: this.id }).then((res) => {
        if (res.status == 0) {
          this.replay = res.data;
        } else {
          this.$tip.error(res.msg);
        }
      });
    },
    // 内容
    getContent() {
      console.log("内容", this.msg);
    },
    // 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    // 清空内容
    clear() {
      console.log(this.$refs.editor);
      this.$refs.editor.clear();
    },
    setTinymce(content) {
      this.msg = content;
    },
    submitArticle() {
      let token = this.$store.state.userInfo.token;
      console.log(this.$store.state.userInfo, "2222");
      if(!this.id){
        alert("未知错误");
        return;
      }
      if (!token) {
        alert("请登录");
        return;
      }
      if (!this.msg) {
        alert("内容不能为空");
        return;
      }
      let postData = {
        token: token,
        info: this.msg,
        articleId:this.id
      };
      this.$api.user.addReplyMessage(postData).then((res) => {
        if (res.status == 0) {
          this.$tip({
            message: "添加成功",
            type: "success",
          });
          this.getReplyMessage();
        }else{
          this.$tip.error(res.msg)
        }
      });
    },    
  },
};
</script>
